<!doctype html>
<html>

<head>
    <title>Canvas HTML5</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="640" height="640">Not Supported</canvas>
    <script>
        const canvas = document.querySelector('#canvas');
        const ctx = canvas.getContext('2d');
        const str = "Hello World";
        ctx.font = 'italic 50px Comic';
        ctx.fillStyle = 'blue';
        //ctx.textAlign = 'left';
        ctx.fillText(str, 100, 100);
        ctx.font = 'bold 20px Arial';
        ctx.fillStyle = 'red';
        for (let x = 1; x < 11; x++) {
            ctx.fillText("counter:" + x, 50, (200 + (40 * x)));
        }

    </script>
</body>

</html>
